<!-- src/components/Login.vue -->
<template>
   <div>
     <el-form :model="form" ref="form" label-width="80px">
       <el-form-item label="用户名">
         <el-input v-model="form.username"></el-input>
       </el-form-item>
       <el-form-item label="密码">
         <el-input type="password" v-model="form.password"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="login">登录</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 <script>
 import { mapActions } from 'vuex'    // 引入辅助函数
 export default {
   name: 'Login',
   data() {    // 定义数据
     return {
       form: {    // 定义表单数据
         username: '',
         password: ''
       }
     }
   },
   methods: {    // 定义方法
      ...mapActions(['loginAsync']),

      login() {
        this.loginAsync(this.form)
          .then(() => {
              const redirect = this.$route.query.redirect || '/profile'
              this.$router.push(redirect)
          })
          .catch(error => {
            alert(error)
          })
      }
   }
 }
 </script>
 <style>
 </style>
